<template>
  <table class="table table-bordered table-stripped">
    <!-- 表格标题区域 -->
    <thead>
      <tr>
        <th></th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- 表格主体区域 -->
    <tbody>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.goods_name }}</td>
        <td>{{ item.goods_price }}</td>
        <td>
          <button
            v-if="!item.inputVisible"
            @click="item.inputVisible = !item.inputVisible"
          >
            + Tag
          </button>
          <input
            type="text"
            v-else
            v-focus
            v-model="item.inputValue"
            @blur="addTag(item.id, item.inputValue)"
          />
          <label
            class="badge"
            v-for="(item, index) in item.tags"
            :key="index"
            >{{ item }}</label
          >
        </td>
        <td><button @click="del(item.id)">删除</button></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {
      isShow: true,
      keyword: '',
    }
  },
  methods: {
    show(inputVisible) {
      inputVisible = !inputVisible
    },
    addTag(id, value) {
      if (value == '') {
        alert('请输入数据！')
      } else {
        this.$emit('addTag', id, value)
      }
    },
    del(id) {
      this.$emit('del', id)
    },
  },
  directives: {
    focus: {
      inserted(ele) {
        ele.focus()
      },
    },
  },
}
</script>

<style scoped lang="less">
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
</style>
